import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Tabs } from 'antd'
import emitter from '@/Evt.js'
const ReactMarkdown = require('react-markdown')
import { getCommentList } from '@/api/common'
import { formatDate } from '@/utils/commons.js'
import './css/comment.less'

class comment extends Component {
	constructor(props) {
		super(props)
	}
	state = {
		articleObj: {}, // 文章数据据
		nextPre: {}, //上一页，下一页数据
		list: [], // 评论列表
	}

	componentDidMount() {
		// this.setState({
		// 	nextPre: this.props.location.query.nextPre,
		// })
		this.getCommentListF()
	}

	getCommentListF = (types) => {
		getCommentList({ ids: 'tb2' }).then(
			(res) => {
				this.setState({
					list: res.list,
				})
			},
			(error) => {}
		)
	}
	commentReply = () => {}
	cancelReply = () => {}

	render() {
		// const {
		// 	title,
		// 	autor,
		// 	times,
		// 	Pageview,
		// 	content,
		// 	types,
		// } = this.state.articleObj
		const { list } = this.state
		return (
			<div className="layout">
				{/* <Modal
      title="Title"
      v-model="modalRelay"
      :mask-closable="false"
      @on-ok="relaySubmit"
    >
      <Form :model="Relaylist" label-position="left" :label-width="100">
        <FormItem label="昵称">
          <Input v-model="Relaylist.autor" placeholder="必填"> </Input>
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="Relaylist.mail" placeholder="选填"></Input>
        </FormItem>
        <FormItem label="个人主页">
          <Input v-model="Relaylist.mypage" placeholder="选填"></Input>
        </FormItem>
        <FormItem label="内容">
          <Input v-model="Relaylist.context" placeholder="必填"></Input>
        </FormItem>
        <FormItem>
          <!-- <Button @click="handleReset()" style="margin-left: 8px"
                >Reset</Button
              > -->
        </FormItem>
      </Form>
    </Modal> */}
				<div className="main-box comment-area">
					<h4 className="page-header">评论</h4>
					{/* <a  name="comments"></a> */}
					{list.map((item, index) => {
						return (
							<div className="comment-list" id="comment-4499" key={index}>
								{/* <a href="javascript:void(0);" name="4499"></a> */}
								<div className="clearfix">
									<div className="comment-left">
										{/* <img src={item.headPic} /> */}
									</div>
									<div className="commnet-right">
										<div className="comment-cont">
											<div className="comment-body">
												<h5>
													<a target="_blank" rel="nofollow">{ item.autor }</a>
												</h5>
												{ item.context }
											</div>
											<p className="comment-info clearfix">
												<span className="float-left mr-small">
                                                    {formatDate(item.times)}
                                                    </span>
												<a onClick={this.commentReply(index)}>回复</a>
											</p>
										</div>
									</div>
								</div>
								<div
									className="comment-list comment-children"
									id="comment-4500"
								>
									{/* <a  href="javascript:void(0);" name="4500"></a> */}
									<div className="clearfix">
										<div className="comment-left">
											{/* <img src={item1.headPic} /> */}
										</div>
										<div className="commnet-right">
											<div className="comment-cont">
												<div className="comment-body">
													<h5>
														{/* <a
                      href="http://www.shukoe.com/"
                      target="_blank"
                      rel="nofollow">{ item1.autor }</a> */}
													</h5>
													{/* @百万链：{ item1.context } */}
												</div>
												<p className="comment-info clearfix">
													{/* <span className="float-left mr-small">{ item1.times | formatDate}</span> */}
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						)
					})}

					<div id="comment-place">
						<div className="comment-post" id="comment-post">
							<div
								className="cancel-reply text-right"
								id="cancel-reply"
							>
								{/* <a rel="noopener noreferrer"
									href="javascript:void(0);"
									onClick={this.cancelReply}
								>
									取消回复
								</a> */}
							</div>
							<h4 className="page-header">发表评论</h4>
							{/* <a href="javascript:void(0);" name="respond" rel="noopener noreferrer"></a> */}
							{/* <Form :model="commentList" label-position="left" :label-width="100">
            <FormItem label="昵称">
              <Input v-model="commentList.autor" placeholder="必填"> </Input>
            </FormItem>
            <FormItem label="邮箱">
              <Input v-model="commentList.mail" placeholder="选填"></Input>
            </FormItem>
            <FormItem label="个人主页">
              <Input v-model="commentList.mypage" placeholder="选填"></Input>
            </FormItem>
            <FormItem label="内容">
              <Input v-model="commentList.context" placeholder="必填"></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit()">提交</Button>
              <Button @click="handleReset()" style="margin-left: 8px"
                >重置</Button
              >
            </FormItem>
          </Form> */}
						</div>
					</div>
				</div>
			</div>
		)
	}
}

export default comment
